<template>
  <div v-loading="isLoading" class="blog-cate-container">
    <h2>文章分类</h2>
    <RightList @select="handleSelect" :list="list" />
  </div>
</template>

<script>
import RightList from './RightList';
import fetchData from '@/mixins/fetchData';
import { getBlogCategoryies } from '@/api/blog';

export default {
  mixins: [fetchData([])],
  components: {
    RightList,
  },
  computed: {
    categoryId() {
      return +this.$route.params.categoryId || -1;
    },
    limit() {
      return +this.$route.query.limit || 10;
    },
    list() {
      const totalArt = this.data.reduce((a, b) => a + b.articleCount, 0);
      // console.log('汇总', totalArt)
      const result = [
        { name: "全部分类", id: -1, articleCount: totalArt },
        ...this.data
      ];
      return result.map(it => {
        return {
          ...it,
          isSelect: it.id === this.categoryId,
          aside: `${it.articleCount}篇`,
        }
      });
    },
  },
  methods: {
    async fetchData() {
      return await getBlogCategoryies();
    },
    handleSelect(item) {
      const query = {
        page: 1,
        limit: this.limit,
      }
      if (item.id === -1) {
        // -1就是全部分类
        this.$router.push({
          name: "Blog",
          query,
        });
      } else { // 那就是有具体的分类了
        this.$router.push({
          name: "CategoryBlog",
          query,
          params: {
            categoryId: item.id,
          }
        })
      };

    },
  },
}
</script>

<style lang="less" scoped>
.blog-cate-container {
  width: 300px;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  height: 100%;

  h2 {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1em;
    margin: 0;
  }
}
</style>